<template>
  <el-card class="page-teamList" shadow="always">
    <template #header>
      <div class="header">
        <el-text class="flex-1">班组信息列表</el-text>
        <el-button type="primary" size="default" @click="$router.push({ name: 'weekly' })"
          >周报</el-button
        >
      </div>
    </template>

    <div class="search">
      <el-select v-model="searchComp" value-key="" placeholder="" clearable filterable @change="">
        <el-option v-for="item in comps" :key="item.id" :label="item.shortName" :value="item.id">
        </el-option>
      </el-select>
      <el-input
        v-model="search"
        placeholder="班组编号..."
        clearable
        :suffix-icon="Search"
        @input="change"
      />
      <el-input
        v-model="seacrhFzr"
        placeholder="负责人..."
        clearable
        :suffix-icon="Search"
        @input="change"
      />
      <el-button type="primary" size="default" @click="">
        <SearchPark theme="outline" size="16" fill="#fff" class="mr-1" />
        搜索
      </el-button>
    </div>

    <div class="table">
      <el-table :data="teams" border stripe>
        <!-- 序号 -->
        <el-table-column label="序号" type="index" width="70" align="center"></el-table-column>
        <!-- 内容 -->
        <el-table-column
          v-for="col in columns"
          :prop="col.prop"
          :key="col.id"
          :label="col.label"
          :width="col.width"
          align="center"
        >
        </el-table-column>
        <!-- 评价 -->
        <el-table-column label="操作" width="100" align="center">
          <template #default="scope">
            <el-select
              v-model="scope.row.evaluate"
              placeholder="请选择评价"
              size="small"
              @change="changeEval(scope.row)"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" width="150" align="center">
          <template #default="scope">
            <el-button-group>
              <el-button
                type="primary"
                @click="$router.push({ name: 'team', params: { id: scope.row.id } })"
                size="small"
              >
                <Link theme="outline" size="14" fill="#fff" />
              </el-button>
              <el-button type="primary" size="small" @click="">
                <FileEditingOne theme="outline" size="14" fill="#fff" />
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="mt-2">
      <el-pagination
        @current-change="currentChange"
        v-model:current-page="currentPage"
        :page-size="10"
        layout="prev, pager, next"
        :total="1000"
        background
        size="small"
      />
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue'
import { FileEditingOne, Link, Search as SearchPark } from '@icon-park/vue-next'

import useComp from '@renderer/composables/useComp'
import useTeam from '@renderer/composables/useTeam'
import { ElMessage } from 'element-plus'

import { ref } from 'vue'

const search = ref('')
const searchComp = ref(1)
const seacrhFzr = ref('')
const currentPage = ref(1)

const { all: allTeam, update: updateTeam, teams } = useTeam()
const { all: allComp, comps } = useComp()

const columns = [
  { id: 1, prop: 'comp.shortName', label: '分包商', width: '120' },
  { id: 2, prop: 'name', label: '名称', width: '' },
  { id: 3, prop: 'fzr', label: '负责人', width: '120' }
]

const writeComp = () => {
  for (const team of teams.value) {
    const { compId } = team
    team.comp = comps.value.find((c) => c.id === compId)
  }
}
const change = () => {}
// 改变评价
const changeEval = async (data: TeamModel) => {
  await updateTeam({
    id: data.id,
    compId: data.compId,
    name: data.name,
    fzr: data.fzr,
    evaluate: data.evaluate
  })
  ElMessage({
    message: '评价修改成功',
    type: 'success'
  })
}

const currentChange = async (value: number) => {
  console.log(value)
  await allTeam({ page: value })
  writeComp()
}

const init = async () => {
  await allTeam({ page: 1 })
  await allComp()
  writeComp()
}
const options = [
  { id: 1, label: '待定', value: 0 },
  { id: 2, label: '合格', value: 1 },
  { id: 3, label: '不合格', value: 2 }
]
init()
</script>

<style lang="scss" scoped>
.page-teamList {
  @apply w-full h-full  bg-slate-100;
  .header {
    @apply flex justify-between;
  }
  .search {
    @apply flex justify-between gap-4;
  }
  .table {
    @apply w-full mt-2;
  }
}
</style>
